import { Link } from 'react-router-dom'

const HotReflect = ({ hotReflectData }) => {
  return (
    <div className="reflect-movie mb-3">
      <ScreeningColumn />
      <HotMovieList hotReflectData={hotReflectData} />
    </div>
  )
}

const ScreeningColumn = () => {
  return (
    <div className="border-line mb-3 pb-2">
      <div className="screening-column row">
        <div className="col-10 d-flex align-content-center ">
          <span className="hotPlay-txt mr-4">正在热映</span>
          <span>
            <Link to={''} className="a-color f-size-13 mr-3">
              全部正在热映»
            </Link>
          </span>
          <span>
            <Link to={''} className="a-color f-size-13">
              即将热映»
            </Link>
          </span>
        </div>
        <div className="col-2 d-flex justify-content-end align-items-end">
          <span className="page-count f-size-12 mr-3">
            3<i style={{ paddingLeft: 2, paddingRight: 2 }}>/</i>6
          </span>
          <div className="slider-btn d-flex ">
            <span className="btn-prev mr-1"></span>
            <span className="btn-next"></span>
          </div>
        </div>
      </div>
    </div>
  )
}

const HotMovieList = ({ hotReflectData }) => {
  return (
    <div className="hotplaylist-wrap overflow-hidden">
      <ul className="d-flex slider-area-ul">
        {hotReflectData.map((item) => (
          <li className="mb-2 movie-frame mr-27" key={item.id}>
            <a href="#">
              <img src={item.img} alt="" className="movie-img" />
            </a>
            <div className="movie-info-waper text-center pl-2 pr-2 mt-2">
              <div className="title f-size-14 text-overflow">{item.title}</div>
              <div className="rating d-flex justify-content-center align-items-center pt-1 pb-2">
                <span className="rating-stars"></span>
                <span className="rating-count f-size-12 pl-1">6.2</span>
              </div>
              <div className="ticket-btn f-size-12">选票购票</div>
            </div>
          </li>
        ))}
      </ul>
    </div>
  )
}

export default HotReflect
